<template>
  <!-- 跑马灯 -->
  <el-carousel height="400px" motion-blur>
    <el-carousel-item v-for="item in 4" :key="item"> </el-carousel-item>
  </el-carousel>

  <!-- 卡片 -->
  <section class="p-5">
    <div class="container">
      <div class="row g-5 p-1">
        <!--后端-->
        <div class="col-md back-end d-flex align-items-center p-2 mx-2">
          <div class="card-body text-center">
            <div class="card-title title">后端技术</div>
            <div class="card-text">
              后端所用技术:SpringCloud、MySql、Redis、MyBatisPlus
            </div>
            <div class="btn btn-light card-button mt-2" @click="backEndClick()">
              看我看我
            </div>
          </div>
        </div>
        <!--简介-->
        <div class="col-md intro d-flex align-items-center p-2 mx-2">
          <div class="card-body text-center">
            <div class="card-title title">芸窗简介</div>
            <div class="card-text">
              项目名称:基于SpringCloud的期刊采编系统的设计与实现
            </div>
            <div
              class="btn btn-light card-button mt-2"
              data-bs-toggle="modal"
              data-bs-target="#eggshell-two"
            >
              配色故事
            </div>
          </div>
        </div>
        <!-- 彩蛋二 -->
        <div
          class="modal fade"
          id="eggshell-two"
          tabindex="-1"
          aria-labelledby="eggshell-two"
          aria-hidden="true"
        >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="eggshell-two">
                  关于芸窗这几个卡片的配色
                </h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                三个卡片的配色分别取决于我写过的的三个项目
                <span class="eggshell">
                  <span class="light-house">“灯塔”，</span>
                  <span class="big-event">“大事件”，</span>
                  <span class="taotie">“饕餮”。</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <!--前端-->
        <div class="col-md front-end d-flex align-items-center p-2 mx-2">
          <div class="card-body text-center">
            <div class="card-title title">前端技术</div>
            <div class="card-text">
              前端所用技术:Vue、Axios、ElementPlus、Echars、BootStrap
            </div>
            <div
              class="btn btn-light card-button mt-2"
              @click="frontEndClick()"
            >
              点我看看
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 页面亮点介绍 -->
  <section class="p-5 bright-spot">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md p-7">
          <h2>项目介绍</h2>
          <p class="lead">本项目是基于SpringCloud的期刊采编系统</p>
          <p>
            在本次项目中使用到了多次EChars图表，实现后台数据可视化。
            同时，"芸窗"也致力于为用户提供更便捷的浏览体验，请开启您美妙的期刊体验。
          </p>
        </div>

        <div class="col-md">
          <img
            src="../assets/images/data-visualization.png"
            alt="1"
            class="img-fluid"
          />
        </div>
      </div>
    </div>
  </section>

  <!-- 项目亮点卡片 -->
  <section class="p-5">
    <div class="container">
      <div class="row g-4 p-3">
        <!--亮点-->
        <div class="col-md feature d-flex align-items-center p-3 mx-3">
          <div class="card-body text-center">
            <div class="card-title title">AI工具</div>
            <div class="card-text">
              前后端均打造AI工具，提高查看文献交互体验
            </div>
          </div>
        </div>
        <!--亮点-->
        <div class="col-md feature d-flex align-items-center p-3 mx-3">
          <div class="card-body text-center">
            <div class="card-title title">智能识别</div>
            <div class="card-text">
              审核员审核前程序自动屏蔽敏感词，增加审核效率
            </div>
          </div>
        </div>
        <!--亮点-->
        <div class="col-md feature d-flex align-items-center p-3 mx-3">
          <div class="card-body text-center">
            <div class="card-title title">3D场景</div>
            <div class="card-text">接入3D模型，打造立体场景互动</div>
          </div>
        </div>
        <!--亮点-->
        <div class="col-md feature d-flex align-items-center p-3 mx-3">
          <div class="card-body text-center">
            <div class="card-title title">回收站</div>
            <div class="card-text">误删稿件？一键恢复！解决文献焦虑烦恼</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 兼容性说明 -->
  <!-- 页面亮点介绍 -->
  <section class="p-5 bright-spot">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md">
          <img
            src="../assets/images/responsive.png"
            alt="1"
            class="img-fluid"
          />
        </div>
        <div class="col-md p-7">
          <h2>兼容性说明</h2>
          <p class="lead">本项目采用Bootstrap，打造响应式布局</p>
          <p>
            本项目在开发过程中考虑到众多兼容性，适配手机、平板、电脑。管理端采用Flex流式布局，用户端采用BootStrap响应式布局。页面内包含小彩蛋，请尽情探索~
            欢迎加入芸窗！
          </p>
        </div>
      </div>
    </div>
  </section>
  <section class="p-5">
    <div class="container">
      <h2 class="text-center mb-4">联系我</h2>

      <ul class="list-group list-group-flush d-flex align-items-center">
        <li
          class="list-group-item fw-bold h4"
          style="color: var(--jiqiu-color)"
        >
          季秋
        </li>

        <li class="list-group-item">
          地址：湖北省武汉市洪山区张家湾白沙洲大道XXX号
        </li>
      </ul>
    </div>
  </section>
</template>
<script setup>
import { h } from "vue";
import { ElNotification } from "element-plus";

// 后端卡片彩蛋
const backEndClick = () => {
  ElNotification({
    title: "后端冷知识~",
    message: h(
      "i",
      { style: "color:var(--light-house-color)" },
      "后端学习成本真的比前端高一niania"
    ),
    position: "top-left",
  });
};
// 前端卡片彩蛋
const frontEndClick = () => {
  ElNotification({
    title: "前端的一个小彩蛋~",
    message: h(
      "i",
      { style: "color: var(--taotie-color)" },
      "这个项目前端学习到的东西比后端更多"
    ),
  });
};
</script>
<style scoped >
@import url("@/assets/css/common.css");
@import url("@/assets/fonts/font.css");
@import url("@/assets/css/dark.css");
.el-carousel__item:nth-child(4n) {
  background-image: url("@/assets/images/1.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.el-carousel__item:nth-child(4n + 1) {
  background-image: url("@/assets/images/2.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.el-carousel__item:nth-child(4n + 2) {
  background-image: url("@/assets/images/3.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.el-carousel__item:nth-child(4n + 3) {
  background-image: url("@/assets/images/4.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 芸窗说明卡片 */
.intro {
  background-image: linear-gradient(
    -225deg,
    #2cd8d5 0%,
    #6b8dd6 48%,
    #8e37d7 100%
  );
  color: #f5f7fa;
  box-shadow: 0 3px 15px rgba(0.3, 0.3, 0.2, 0.35);
  border-radius: 8px;
}
.back-end {
  background-image: linear-gradient(
    -225deg,
    #dfffcd 0%,
    #90f9c4 48%,
    #39f3bb 100%
  );
  box-shadow: 0 3px 15px rgba(0.3, 0.3, 0.2, 0.35);
  border-radius: 8px;
}
.front-end {
  background-image: linear-gradient(
    -225deg,
    #ffe29f 0%,
    #ffa99f 48%,
    #ff719a 100%
  );
  box-shadow: 0 3px 15px rgba(0.3, 0.3, 0.2, 0.35);
  border-radius: 8px;
}
/* 卡片标题 */
.title {
  font-size: 30px;
  font-family: "HongLei";
}

/* 彩蛋样式 */
.light-house {
  color: var(--light-house-color); /* 灯塔的颜色 */
}
.big-event {
  color: var(--big-event-color); /* 大事件的颜色 */
}
.taotie {
  color: var(--taotie-color); /* 饕餮的颜色 */
}
.eggshell {
  white-space: nowrap; /* 防止文本换行 */
}

.card-button,
.card-button:visited,
.card-button:active {
  font-weight: bold;
  color: var(--jiqiu-color);
}
.bright-spot {
  background-color: #fff;
  box-shadow: 0 3px 15px rgba(0.3, 0.3, 0.2, 0.2);
}
.feature {
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  background-blend-mode: screen;
  color: var(--jiqiu-color);
  border-radius: 12px;
  box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.15);
}
</style>
